{% if(videos|length) %}
    <main class="bs-docs-masthead" id="content" role="main">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators slide-pagination">
                {% if(videos|length) %}
                    {% set _count = 0 %}
                    {%  for videoPoster in videos %}
                        <li data-target="#carousel-example-generic" data-slide-to="{{ _count }}" class="{{ _count == 0 ? 'active' : '' }}">
                            {{ image(constant.pathUploadImageThubnail ~ '130_130/' ~ videoPoster.imageLink.getFirst().images.getImagePath() , 'width' : '60' , 'height' : '60') }}
                        </li>
                        {% set _count = _count + 1 %}
                    {%  endfor %}
                {% endif %}
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                {% if(videos|length) %}
                    {% set _count = 1 %}
                    {%  for videoPoster in videos %}
                        
                        <div class="item {{ _count == 1 ? 'active' : '' }}">
                            <a href="{{url(videoPoster.getLinkTo())}}">
                                {{ image(constant.pathUploadImage ~ videoPoster.getPosterImages().images.getImagePath()) }}
                            </a>
                            <div class="carousel-caption">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-6">
                                        </div>
                                        <div class="col-md-6">
                                            <div class="title">{{ videoPoster.videoDescription.getName() }}</div>
                                            <div class="short-desc text14">
                                                <div class="dotdotdot" style="height: auto; width: auto;max-height:23px;">
                                                    {{ videoPoster.videoDescription.getDescription() }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% set _count = _count + 1 %}
                    {%  endfor %}
                {% endif %}
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left icon-prev"></span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right icon-next"></span>
            </a>
        </div>
    </main>
{% endif %}